<template>
  <div class="address">
    <van-address-list v-model="chosenAddressId" :switchable="false" :list="addressList"
      default-tag-text="默认" @add="onAdd" @edit="onEdit" />
  </div>
</template>

<script>
  import Vue from "vue";
  import { AddressList } from "vant";
  import { Toast } from "vant";

  Vue.use(Toast);

  Vue.use(AddressList);
  import apiMar from "@/api/api";
  export default {
    components: {},
    data() {
      return {
        chosenAddressId: "2",
        list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true
        },
        {
          id: "2",
          name: "李四",
          tel: "1310000000",
          address: "浙江省杭州市拱墅区莫干山路 50 号"
        }],
        // disabledList: [
        //   {
        //     id: "3",
        //     name: "王五",
        //     tel: "1320000000",
        //     address: "浙江省杭州市滨江区江南大道 15 号"
        //   }
        // ]
        addressList: []
      };
    },
    computed: {},
    watch: {},
    methods: {
      getList(val) {
        console.log(val, "vaaaaaaaa");
        let params = {
          current: 1,
          pageSize: 20
        };
        apiMar
          .addressList(params)
          .then(res => {
            this.addressList = res.data;
            this.addressList.forEach(item => {
              item.tel = item.phone
              item.address = item.detail
              item.isDefault = item.default == 1 ? true : false
            })
          })
          .catch(err => {
            // this.$Message.error(err)
          });
      },

      onAdd() {
        this.$router.push({
          path: "/addressAdd"
        });
      },
      onEdit(item, index) {
        // Toast("编辑地址:" + index);
        console.log(item, "222");
        window.localStorage.setItem("addressVal", JSON.stringify(item));
        this.$router.push({
          path: "/addressEdit",
          query: { edit: true }
        });
      }
    },
    created() {
      this.getList();
    },
    mounted() {}
  };
</script>
<style lang="scss" scoped></style>